<template>
	<footer class="cart-footer">
		<div>
			<Checkbox afterText="全选" :value="shopCart.checkAll" @change="changeCheckAll"/>
		</div>
		<div class="cart-footer-action">
			<span class="cart-footer-total">
				<span>合计：</span>
				<span>{{allTotal | formatMoney}}</span>
			</span>
			<button v-show="update" @click="purchaseShop">下单</button>
			<button v-show="!update" @click="removeCheck">删除</button>
		</div>
	</footer>
</template>

<script>
	import {mapActions, mapState, mapMutations} from 'vuex';
	import Checkbox from '#/Public/Checkbox';

	export default {
		name: "Footer",
		props: {
			allTotal: {
				type: Number,
				required: true
			},
			update: {
				type: Boolean,
				required: true
			}
		},
		computed: {
			...mapState(['shopCart'])
		},
		methods: {
			...mapMutations(['removeCheck']),
			...mapActions(['changeCheckAll', 'addPurchase']),
			purchaseShop() {
				let goods = this.shopCart.shopCart.filter(item => item.checked);
				if (goods.length === 0) {
					this.$alert({
						title: '错误',
						message: '请选择商品！'
					});
				} else {
					this.$message({
						type: 'loading',
						message: '商品准备中···'
					});
					this.addPurchase(goods);
					setTimeout(() => {
						this.$router.push('/purchase');
					}, 1500);
				}
			}
		},
		components: {
			Checkbox
		}
	}
</script>
